<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
	<style type="text/css">
		html, body{height: 100%;font-family: "微软雅黑";}
		*{margin: 0;padding: 0;box-sizing: border-box;}
		a {color: #428bca;text-decoration: none;}
		a:hover,a:focus {color: #2a6496;text-decoration: underline;}
		a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
		
		.padd_40{padding-top: 80px;background: #F5F5F5;overflow-x:hidden;}
		.a{text-align:center;line-height: 40px;position: fixed;top: 0;left: 0;width: 100%;z-index: 10;border-bottom: 1px #ccc solid; background: #f50;color: #fff;}
		.tab{display: flex;line-height: 40px;position: fixed;top: 40px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}
		.tab a{width: 33.333333%;background: #fff;text-align: center;}
		.tab .active{border-bottom: 1px #f50 solid; color: #f50;}
		.panel{margin: 0;}
		
		.refreshtip {position: absolute;left: 0;width: 100%;margin: 10px 0;text-align: center;color: #999;}
		.swiper-container{overflow: visible;}
		.loadtip { display: block;width: 100%;line-height: 40px; height: 40px;text-align: center;color: #999;border-top: 1px solid #ddd;}
		.swiper-container, .w{height: calc(100vh - 120px);}
		.swiper-slide{height: auto;}
		
		.text-center{text-align: center;}
		.list-group{padding-left: 0;margin-bottom: 20px;}
		.list-group-item{    position: relative; display: block;padding: 10px 15px;margin-bottom: -1px;background-color: #fff;border: 1px solid #ddd;}
		.list-group-item:first-child {border-top-left-radius: 4px;border-top-right-radius: 4px;}
	</style>
</head>
<body class="padd_40">
	<div class="a">标题</div>
	<div class="tab">
		<a class="active" href="javascript:;">tab1</a>
		<a href="javascript:;">tab2</a>
		<a href="javascript:;">tab3</a>
	</div>
	<div class="swiper-container">
		<div class="refreshtip">下拉可以刷新</div>
		<div class="swiper-wrapper w">
			<div class="swiper-slide d">
				<div class="init-loading list-group-item text-center" style="display: none;">下拉可以刷新</div>
				<div class="swiper-container2">
					<div class="swiper-wrapper">
						<div class="swiper-slide list-group">
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
						</div>
						<div class="swiper-slide list-group">
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
						</div>
						<div class="swiper-slide list-group">
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
							<div class="list-group-item">列表</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="loadtip">上拉加载更多</div>
		<div class="swiper-scrollbar"></div>
	</div>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var loadFlag = true;
	var oi = 0;
	var mySwiper = new Swiper('.swiper-container',{
		direction: 'vertical',
		scrollbar: '.swiper-scrollbar',
		slidesPerView: 'auto',
		mousewheelControl: true,
		freeMode: true,
		onTouchMove: function(swiper){		//手动滑动中触发
			var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
            var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
            
            
            if(mySwiper.translate < 50 && mySwiper.translate > 0) {
				$(".init-loading").html('下拉刷新...').show();
			}else if(mySwiper.translate > 50 ){
				$(".init-loading").html('释放刷新...').show();
			}
		},
		onTouchEnd: function(swiper) {
			var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
            var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
             // 上拉加载
            if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {
                // console.log("已经到达底部！");
               
                if(loadFlag){
                	$(".loadtip").html('正在加载...');
                }else{
                	$(".loadtip").html('没有更多啦！');
                }
                
                setTimeout(function() {
                    for(var i = 0; i <5; i++) {
                    	oi++;
                        $(".list-group").eq(mySwiper2.activeIndex).append('<li class="list-group-item">我是加载出来的'+oi+'...</li>');
                    }
                     $(".loadtip").html('上拉加载更多...');
                    mySwiper.update(); // 重新计算高度;
                }, 800);
            }
            
            // 下拉刷新
            if(mySwiper.translate >= 50) {
                $(".init-loading").html('正在刷新...').show();
                $(".loadtip").html('上拉加载更多');
                loadFlag = true;
                
                setTimeout(function() {
                    $(".refreshtip").show(0);
                    $(".init-loading").html('刷新成功！');
                    setTimeout(function(){
                    	$(".init-loading").html('').hide();
                    },800);
                    $(".loadtip").show(0);
                    
                    //刷新操作
                    mySwiper.update(); // 重新计算高度;
                }, 1000);
            }else if(mySwiper.translate >= 0 && mySwiper.translate < 50){
            	$(".init-loading").html('').hide();
            }
            return false;
		}
	});
	var mySwiper2 = new Swiper('.swiper-container2',{
		onTransitionEnd: function(swiper){
			
			$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
			$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
			mySwiper.update();
			
			$('.tab a').eq(mySwiper2.activeIndex).addClass('active').siblings('a').removeClass('active');
		}
		
	});
	$('.tab a').click(function(){
		
		$(this).addClass('active').siblings('a').removeClass('active');
		mySwiper2.slideTo($(this).index(), 500, false)
		
		$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
		$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
		mySwiper.update();
	});
</script>
</body>
</html>
